<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="草稿箱" name="first">
        <el-table :header-cell-style="headClass" :data="draftsData" style="width: 100%">
          <el-table-column prop="edition" label="版本号" width="180"></el-table-column>
          <el-table-column prop="describe" label="描述" width="480"></el-table-column>
          <el-table-column prop="from" label="来源小程序"></el-table-column>
          <el-table-column prop="developer" label="最近上传开发者"></el-table-column>
          <el-table-column prop="submitTime" label="最近提交时间"></el-table-column>
          <el-table-column prop="operation" label="操作">
            <template>
              <span> 添加到模板库 </span>
              <span> 删除 </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- <p class="shugang"></p> -->
      <el-tab-pane label="小程序模板库" name="second">
        <el-table :header-cell-style="headClass" :data="templateLibraryData" style="width: 100%">
          <el-table-column prop="edition" label="版本号" width="180"></el-table-column>
          <el-table-column prop="describe" label="描述" width="480"></el-table-column>
          <el-table-column prop="templateID" label="templateID"></el-table-column>
          <el-table-column prop="addTime" label="添加到模板库时间"></el-table-column>
          <el-table-column prop="operation" label="操作">
            <template>
              <span>详情</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getPageList"
    />
  </div>
</template>
<script>
import Pagination from "../../components/Pagination/index";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      // 草稿箱
      draftsData: [
        {
          edition: "1.0.1",
          describe: "度心在20213月16日中午11点35分提交上传",
          from: "精准SDMP壹号",
          developer: "lrg110456789",
          submitTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.2",
          describe: "度心在20213月16日中午11点35分提交上传",
          from: "精准SDMP壹号",
          developer: "lrg110456789",
          submitTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.3",
          describe: "度心在20213月16日中午11点35分提交上传",
          from: "精准SDMP壹号",
          developer: "lrg110456789",
          submitTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.4",
          describe: "度心在20213月16日中午11点35分提交上传",
          from: "精准SDMP壹号",
          developer: "lrg110456789",
          submitTime: "2021-3-15 11:30",
        },
      ],
      // 小程序管理库
      templateLibraryData: [
        {
          edition: "1.0.4",
          describe: "度心在20213月16日中午11点35分提交上传",
          templateID: "0",
          addTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.4",
          describe: "度心在20213月16日中午11点35分提交上传",
          templateID: "1",
          addTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.4",
          describe: "度心在20213月16日中午11点35分提交上传",
          templateID: "2",
          addTime: "2021-3-15 11:30",
        },
        {
          edition: "1.0.4",
          describe: "度心在20213月16日中午11点35分提交上传",
          templateID: "3",
          addTime: "2021-3-15 11:30",
        },
      ],
      listQuery: {
        // roleId: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 10,

      formInline: {
        user: "",
        region: "",
      },
    };
  },
  components: {
    Pagination,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    headClass() {
      return "background:#F5F6FA; height:40px; fontSize:14px;fontWidth:light;";
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-tabs__active-bar {
  background-color: #fff;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: #fff;
}
/deep/.el-tabs__item {
  // border-right: 1px solid #ccc;
  height: 20px;
  line-height: 20px;
  padding: 0 20px;
  position: relative;

  &:last-child::before {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
  }
}
/deep/.el-tabs__nav-scroll {
  padding: 30px;
}
/deep/.el-tabs__content {
  padding: 0 30px;
}
</style>
